// 自适应echarts的函数
function fontSize(res) {
  // alert(111);
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = 100 * (clientWidth / 1920);
  console.log(fontSize);
  // console.log(res * fontSize);
  return res * fontSize;
}

function caigousummary(echarts, idstring) {
  var myChart = echarts.init(document.getElementById(idStr));
  var option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar"
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

//分类占比
function fenleipercent(echarts, idStr, data, color, text) {
  // 基于准备好的dom，初始化echarts实例
  setTimeout(() => {
    var myChart = echarts.init(document.getElementById(idStr));

    var scale = 1;
    var echartData = data;
    var rich = {
        yellow: {
            color: "#5BFFFF",
              fontSize: fontSize(0.23),
              fontFamily: "DIN-Bold",
              align: "center",
        },
        total: {
            color: "#fff",
            fontSize: fontSize(0.16),
            align: 'center',
            // padding: [5, 0]
        },
        white: {
            color: "#a2c7f3",
            align: 'center',
            fontSize: fontSize(0.14),
            padding: [0, 0]
        },
        blue: {
            color: '#3bc7ff',
            fontSize: fontSize(0.1)* scale,
            align: 'center'
        },
        hr: {
            borderColor: '#a2c7f3',
            width: '100%',
            borderWidth: 1,
            height: 0,
        }
    }
    option = {
        // backgroundColor: '#031f2d',
        title: {
            // text: text,
            left: 'center',
            // top: '38%',
            // padding: [10, 0],
            textStyle: {
                color: "#7d94cf",
                fontSize: fontSize(0.13),
                fontWeight: "normal",
                align: "center"
            }
        },
        grid: {
            // left: "3%",
            // right: "4%",
            // bottom: "3%",
            // width: "100px",
            // height: "100px",
        },
        legend: {
            selectedMode: false,
            formatter: function (name) {
                var total = 0; 
                var averagePercent; 
                echartData.forEach(function (value, index, array) {
                  total += value.value;
                });
                return "{white|"+text+'}\n'+"{yellow|" + total + "}";
            },
            data: [echartData[0].name],           
            // itemGap: 50,
            left: 'center',
            top: 'center',
            icon: 'none',
            align: 'center',
            textStyle: {
                color: "#fff",
                fontSize: fontSize(0.2),
                fontFamily: "DIN-Bold",
                rich: rich
            },
        },
        series: [{
          
            type: 'pie',
            // center: ["50%","50%"],
            radius: ["40%", "60%"],
            hoverAnimation: false,
            color: color,
            label: {
                normal: {
                    formatter: function (params, ticket, callback) {
                        var total = 0; //考生总数量
                        var percent = 0; //考生占比
                        echartData.forEach(function (value, index, array) {
                            total += value.value;
                        });
                        percent = ((params.value / total) * 100).toFixed(1);
                        return '{white|' + params.name + '}\n{total|' + percent + '%}';
                    },
                    rich: rich
                },
            },
            labelLine: {
                normal: {
                    length: fontSize(0.15) * scale,
                    length2: fontSize(0.05),
                    lineStyle: {
                        color: '#a2c7f3'
                    }
                }
            },
            data: echartData
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize();
})
}

//消毒台账图表

function xiaoduchart(echarts, idStr, data, color) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(idStr));
  var scale = 1;
  var echartData = data;
  var rich = {
    yellow: {
      color: "#5BFFFF",
      fontSize: fontSize(0.2),
      fontFamily: "DIN-Bold",
      align: "center"
    },
    total: {
      color: "#fff",
      fontSize: fontSize(0.16),
      align: "center",
      padding: [5, 0]
    },
    white: {
      color: "#a2c7f3",
      align: "center",
      fontSize: fontSize(0.14),
      padding: [0, 0]
    },
    blue: {
      color: "#3bc7ff",
      fontSize: fontSize(0.1) * scale,
      align: "center"
    },
    hr: {
      borderColor: "#a2c7f3",
      width: "100%",
      borderWidth: 1,
      height: 0
    }
  };
  option = {
    // backgroundColor: '#031f2d',
    title: {
      // text: '总计',
      left: "center",
      // top: '35%',
      padding: [0, 30],
      textStyle: {
        color: "#7d94cf",
        fontSize: fontSize(0.13),
        fontWeight: "normal",
        align: "center"
      }
    },
    grid: {
      // left: "3%",
      // right: "4%",
      // bottom: "3%",
      // width: "100px",
      // height: "100px",
      top: "0px",
      left: "0px",
      right: "0px",
      bottom: "0px"
    },
    legend: {
      selectedMode: false,
      formatter: function (name) {
        var total = 0;
        var averagePercent;
        echartData.forEach(function (value, index, array) {
          total += value.value;
        });
        return "{white|总计}\n{yellow|" + total + "}";
      },
      data: [echartData[0].name],
      // data: ['高等教育学'],
      // itemGap: 50,
      left: "center",
      top: "center",
      icon: "none",
      align: "center",
      textStyle: {
        color: "#fff",
        fontSize: fontSize(0.26),
        fontFamily: "DIN-Bold",
        rich: rich
      }
    },
    series: [
      {
        // name: '总考生数量',
        type: "pie",
        center: ["50%", "50%"],
        radius: ["55%", "70%"],
        hoverAnimation: false,
        color: color,
        label: {
          normal: {
            formatter: function (params, ticket, callback) {
              var total = 0; //考生总数量
              var percent = 0; //考生占比
              echartData.forEach(function (value, index, array) {
                total += value.value;
              });
              percent = ((params.value / total) * 100).toFixed(1);
              return "{white|" + params.name + "}\n{total|" + percent + "%}";
            },
            rich: rich
          }
        },
        labelLine: {
          normal: {
            length: fontSize(0.2) * scale,
            length2: 0,
            lineStyle: {
              color: "#a2c7f3"
            }
          }
        },
        data: echartData
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

// 柱状图
// 立体柱状图
function sanweibar(echarts, idstring) {
  //图形路径
  const symbols = [
    "path://M66.1,35.7L100,49.8v128.7l-33.9-12.7L66.1,35.7z", //左边
    "path://M133.9,35.7L100,49.8v128.7l33.9-12.7V35.7z", //右边
    "path://M66.1,35.7L100,21.5l33.9,14.1L100,49.8L66.1,35.7z" //菱形
  ];
  //源数据
  const data = [
    {
      label: "治安",
      value: 500
    },
    {
      label: "交通",
      value: 400
    },
    {
      label: "人脸",
      value: 500
    }
  ];
  //数据最大值（需要结合源数据取最大值过程不在此编写，可使用lodash）
  const maxData = 1000;
  //横坐标数值
  const xAxisData = data.map(e => {
    return e.label;
  });
  //图形颜色
  const colorList = ["#5f55ed59", "#f8954359", "#47d69d59"];
  //图形边框颜色
  const borderColorList = ["#5f55ed", "#f89543", "#47d69d"];
  //图形顶部颜色
  const colorTopList = ["#5571f659", "#f1d57759", "#3fdfc159"];
  //图形顶部框颜色
  const colorBorderTopList = ["#5f55ed", "#fd7d3d", "#25cd75"];
  //图形底部颜色
  const colorBottomList = ["#437ffa", "#fee266", "#35c9c7"];
  //图形实体顶部颜色
  const topColorList = ["#5571f6", "#f1d577", "#3fdfc1"];
  //图形柱体颜色
  const barColorList = ["#7148ea", "#fd7d3d", "#25cd75"];
  //左右框数值
  const leftAndRightData = [];
  //顶部框数值
  const topBorderData = [];
  //底部框数值
  const bottomBorderData = [];
  //顶部实体数值
  const topData = [];
  //图形柱体数值
  const barData = [];
  for (var i = 0; i < data.length; i++) {
    leftAndRightData.push({
      name: data[i].label,
      value: maxData,

      itemStyle: {
        color: colorList[i],
        borderColor: borderColorList[i]
      }
    });
    topBorderData.push({
      name: data[i].label,
      value: maxData,
      symbolPosition: "end",
      itemStyle: {
        color: colorTopList[i],
        borderColor: colorBorderTopList[i]
      }
    });
    bottomBorderData.push({
      name: data[i].label,
      value: maxData,
      itemStyle: {
        color: colorBottomList[i]
      }
    });
    topData.push({
      name: data[i].label,
      value: data[i].value,
      symbolPosition: "end",
      itemStyle: {
        color: topColorList[i]
      }
    });
    barData.push({
      name: data[i].label,
      value: data[i].value,
      label: {
        show: true,
        position: "bottom",
        distance: 60,
        color: barColorList[i],
        fontSize: 40
      },
      itemStyle: {
        color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: barColorList[i]
          },
          {
            offset: 1,
            color: colorBottomList[i]
          }
        ])
      }
    });
  }
  //顶部框数值

  var myChart = echarts.init(document.getElementById(idstring));

  var option = {
    // backgroundColor: "#020C33",
    xAxis: [
      {
        data: xAxisData,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          margin: 30,
          fontSize: fontSize(0.2),
          color: "#707FB3"
        }
      }
    ],
    yAxis: {
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    grid: {
      show: false,
      height: 200
    },
    series: [
      {
        name: "左边",
        type: "pictorialBar",
        symbolSize: ["50%", "100%"],
        symbolOffset: [-70, 20],
        barWidth: 10,
        silent: true,
        z: 12,
        symbol: symbols[0],
        data: leftAndRightData
      },
      {
        name: "右边",
        type: "pictorialBar",
        symbolSize: ["50%", "100%"],
        symbolOffset: [-20, 20],
        barWidth: 20,
        silent: true,
        z: 12,
        symbol: symbols[1],
        data: leftAndRightData
      },
      // //菱形顶部框
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [100, 40],
        symbolOffset: [0, 0],
        silent: true,
        symbol: symbols[2],
        data: topBorderData
      },

      // // //菱形底部实体
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [101, 38],
        symbolOffset: [0, 20],
        silent: true,
        z: 12,
        symbol: symbols[2],
        data: bottomBorderData
      },
      // // //菱形顶部实体
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [99, 45],
        symbolOffset: [0, -23],
        z: 16,
        silent: true,
        symbol: symbols[2],
        data: topData,
        animationDuration: 1000,
        animationDelay: function (idx) {
          // 越往后的数据延迟越大
          return idx * 500;
        }
      },

      // // //柱形实体
      {
        type: "bar",
        silent: true,
        barWidth: 20,
        barGap: "-100%",
        z: 13,
        data: barData,
        animationDuration: 1000,
        animationDelay: function (idx) {
          // 越往后的数据延迟越大
          return idx * 500;
        }
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

function sanweibar2(echarts, idstring, data, color) {
  var myChart = echarts.init(document.getElementById(idstring));

  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - 9, shape.y - 9];
      const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    }
  });
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
      const c4 = [shape.x + 18, shape.y - 9];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    }
  });
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y];
      const c2 = [shape.x + 18, shape.y - 9];
      const c3 = [shape.x + 9, shape.y - 18];
      const c4 = [shape.x - 9, shape.y - 9];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    }
  });
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
  const MAX = [200, 200];
  const VALUE = [100, 50];
  option = {
    // backgroundColor: "#012366",
    title: {
      text: "",
      top: 0,
      left: 0,
      textStyle: {
        color: "#00F6FF",
        fontSize: fontSize(0.14)
      }
    },
    grid: {
      left: 30,
      right: 10,
      bottom: 40,
      top: 40
      // containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["餐具消毒（个）", "共工具消毒（个）"],
      axisLine: {
        show: false,
        lineStyle: {
          color: "white"
        }
      },
      offset: 30,
      axisTick: {
        show: false,
        length: 9,
        alignWithLabel: true,
        lineStyle: {
          color: "#7DFFFD"
        }
      },
      axisLabel: {
        fontSize: fontSize(0.1),
        margin: -15
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          // padding:[0,0,0,0],
          color: "white"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        fontSize: fontSize(0.14)
      },
      boundaryGap: ["10%", "10%"]
    },
    series: [
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: "rgba(72,156,221,.27)"
                }
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: "rgba(59,128,226,.27)"
                }
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: "rgba(72,156,221,.27)"
                }
              }
            ]
          };
        },
        data: MAX
      },
      {
        type: "custom",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#3B80E2"
                    },
                    {
                      offset: 1,
                      color: "#49BEE5"
                    }
                  ])
                }
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#3B80E2"
                    },
                    {
                      offset: 1,
                      color: "#49BEE5"
                    }
                  ])
                }
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#3B80E2"
                    },
                    {
                      offset: 1,
                      color: "#49BEE5"
                    }
                  ])
                }
              }
            ]
          };
        },
        data: VALUE
      },
      {
        type: "bar",
        label: {
          normal: {
            show: true,
            position: "top",
            formatter: e => {
              switch (e.name) {
                case "10kV线路":
                  return MAX[0];
                case "公用配变":
                  return MAX[1];
                case "35kV主变":
                  return MAX[2];
                case "水":
              }
            },
            fontSize: 14,
            color: "#fff",
            offset: [4, -25]
          }
        },
        itemStyle: {
          color: "transparent"
        },
        data: VALUE
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

function sanweibar4(echarts, idstring, data, color) {
  var myChart = echarts.init(document.getElementById(idstring));

  var xData = ["餐具消毒(个)", "公用具消毒(个)"];
  var line = ["300", "300"];
  var attr = {
    name: "餐具消毒",
    unit: "个"
  };
  // var graphicData = ["A级:1000-10000元/人",
  // "B级:10000-100000元/人",
  // "C级:100000-10000000元/人",
  // ];
  var colors = [];
  option = {
    tooltip: {
      //之前trgger是item，当数据为0的时候会导致左上角有一块隐藏的区域可以触发
      trigger: "axis",
      axisPointer: { type: "none" },
      padding: 1,
      formatter: function (param) {
        var resultTooltip =
          "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
          "<div style='text-align:center;'>" +
          param[0].name +
          "</div>" +
          "<div style='padding-top:5px;'>" +
          "<span style=''> " +
          attr.name +
          ": </span>" +
          "<span style=''>" +
          param[0].value +
          "</span><span>" +
          attr.unit +
          "</span>" +
          "</div>" +
          "</div>";
        return resultTooltip;
      }
    },
    // graphic: [{
    //     type: 'text',
    //     z: 100,
    //     right: '4%',
    //     top: '8%',
    //     style: {
    //         fill: '#81A5E8',
    //         text: graphicData.join('\n'),
    //         padding:[20,20],
    //         font: 'italic small-caps  18px/2 cursive',

    //     }
    // }],
    grid: {
      left: "5%",
      top: "10%",
      right: "5%",
      bottom: "40%"
    },
    legend: {
      show: true,
      icon: "circle",
      orient: "horizontal",
      top: "90.5%",
      right: "center",
      itemWidth: 16.5,
      itemHeight: 6,
      // itemGap: 30,
      textStyle: {
        // color: '#FFFFFF'
        color: "#C9C8CD",
        fontSize: fontSize(0.14)
      }
    },
    xAxis: [
      {
        data: xData,
        axisLabel: {
          textStyle: {
            color: "#7D94CF",
            fontSize: fontSize(0.12)
          },
          margin: 30, //刻度标签与轴线之间的距离。
          internal: 0,
          rotate: 45 //代表逆时针旋转45度
        },

        axisLine: {
          show: false //不显示x轴
        },
        axisTick: {
          show: false //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
          lineStyle: {
            color: "#eee",
            type: "solid"
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false,
          textStyle: {
            color: "#888"
          }
        }
      }
    ],
    series: [
      {
        //柱底圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [60, 22], //调整截面形状
        symbolOffset: [0, 10],
        z: 12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(89,211,255,1)"
              },
              {
                offset: 1,
                color: "rgba(23,237,194,1)"
              }
            ])
          }
        },
        data: line
      },

      //柱体
      {
        name: "",
        type: "bar",
        barWidth: 60,
        barGap: "0%",
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  //第一节下面
                  offset: 0,
                  color: "rgba(0,255,245,0.5)"
                },
                {
                  offset: 1,
                  color: "#43bafe"
                }
              ]
            }
          }
        },

        data: line
      },

      //柱顶圆片
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [60, 22], //调整截面形状
        symbolOffset: [0, -10],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(89,211,255,1)"
                },
                {
                  offset: 1,
                  color: "rgba(23,237,194,1)"
                }
              ],
              false
            )
          }
        },
        data: line
      }
    ]
  };

  myChart.setOption(option);
  window.onresize = myChart.resize();
}

function sanweibar3(echarts, idstring, data, color) {
  var myChart = echarts.init(document.getElementById(idstring));

  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - 9, shape.y - 9];
      const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    }
  });
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
      const c4 = [shape.x + 18, shape.y - 9];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    }
  });
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y];
      const c2 = [shape.x + 18, shape.y - 9];
      const c3 = [shape.x + 9, shape.y - 18];
      const c4 = [shape.x - 9, shape.y - 9];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    }
  });
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
  const MAX = [300, 300, 300];
  const VALUE = [100, 200, 300];
  option = {
    // backgroundColor: "#010d3a",
    title: {
      text: "",
      top: 32,
      left: 18,
      textStyle: {
        color: "#00F6FF",
        fontSize: 24
      }
    },
    grid: {
      left: 20,
      right: 40,
      bottom: 40,
      top: 40,
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["早餐留样（个）", "中餐留样（个）", "晚餐留样（个）"],
      axisLine: {
        show: false,
        lineStyle: {
          color: "white"
        }
      },

      offset: 20,
      axisTick: {
        show: false,
        length: 9,
        alignWithLabel: true,
        lineStyle: {
          color: "#7DFFFD"
        }
      },
      axisLabel: {
        fontSize: 10,
        margin: -15,
        interval: 0
        // rotate:45
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        fontSize: 16
      },
      boundaryGap: ["20%", "20%"]
    },
    series: [
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: "rgba(7,29,97,.6)"
                }
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: "rgba(10,35,108,.7)"
                }
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: "rgba(11,42,106,.8)"
                }
              }
            ]
          };
        },
        data: MAX
      },
      {
        type: "custom",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#E9B438"
                    },
                    {
                      offset: 1,
                      color: "#E9B438"
                    }
                  ])
                }
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#E9B438"
                    },
                    {
                      offset: 1,
                      color: "#E9B438"
                    }
                  ])
                }
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#E9B438"
                    },
                    {
                      offset: 1,
                      color: "#E9B438"
                    }
                  ])
                }
              }
            ]
          };
        },
        data: VALUE
      },
      {
        type: "bar",
        label: {
          normal: {
            show: true,
            position: "top",
            formatter: e => {
              switch (e.name) {
                case "10kV线路":
                  return VALUE[0];
                case "公用配变":
                  return VALUE[1];
                case "35kV主变":
                  return VALUE[2];
                case "水":
              }
            },
            fontSize: fontSize(0.16),
            color: "#fff",
            offset: [4, -25]
          }
        },
        itemStyle: {
          color: "transparent"
        },
        data: VALUE
      }
    ]
  };

  myChart.setOption(option);
  window.onresize = myChart.resize();
}

function hengxiangbar(echarts, idstring, cate, num) {
  var myChart = echarts.init(document.getElementById(idstring));

  var charts = {
    // 按顺序排列从大到小
    cityList: cate,
    cityData: num
  };
  var top10CityList = charts.cityList;
  var top10CityData = charts.cityData;
  var color = ["#ff9500", "#ff9500", "#ff9500"];
  var color1 = ["#ffb349", "#ffb349", "#ffb349"];

  let lineY = [];
  let lineT = [];
  for (var i = 0; i < charts.cityList.length; i++) {
    var x = i;
    if (x > 1) {
      x = 2;
    }
    var data = {
      name: charts.cityList[i],
      color: color[x],
      value: top10CityData[i],
      barGap: "0%",
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: color[x]
              },
              {
                offset: 1,
                color: color1[x]
              }
            ],
            false
          ),
          barBorderRadius: 2
        },
        emphasis: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.1)"
        }
      }
    };
    var data1 = {
      value: top10CityData[0],
      itemStyle: {
        color: "#7d94cf",
        barBorderRadius: 10
      }
    };
    lineY.push(data);
    lineT.push(data1);
  }

  var option = {
    // backgroundColor: '#244f97',
    title: {
      show: false
    },
    tooltip: {
      trigger: "item",
      formatter: p => {
        if (p.seriesName === "total") {
          return "";
        }
        return `${p.name}<br/>${p.value}`;
      }
    },
    grid: {
      borderWidth: 0,
      top: "1%",
      left: "1%",
      right: "20%",
      bottom: "30%"
    },
    color: color,
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        grid: {
            borderWidth: 0,
            top: '1%',
            left: '1%',
            right: '20%',
            bottom: '10%'
        },
        data: top10CityList
      },
      {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          inside: false,
          // verticalAlign: 'bottom',
          lineHeight: "30",
          textStyle: {
            color: "#fff",
            fontSize: fontSize(0.16),
            fontFamily: "PingFangSC-Regular"
          },
          formatter: function (val) {
            return `${val}`;
          }
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: top10CityData.reverse()
      }
    ],
    xAxis: {
      type: "value",
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        name: "total",
        type: "bar",
        zlevel: 1,
        barGap: "-100%",
        barWidth: "10px",
        data: lineT,
        legendHoverLink: false
      },
      {
        name: "bar",
        type: "bar",
        zlevel: 2,
        barWidth: "10px",
        data: lineY,
        label: {
          normal: {
            color: "#7d94cf",
            show: true,
            position: [0, "-15px"],
            textStyle: {
              fontSize: fontSize(0.16)
            },
            formatter: function (a) {
              let num = "";
              let str = "";
              if (a.dataIndex + 1 < 10) {
                num = a.dataIndex + 1;
              } else {
                num = a.dataIndex + 1;
              }
              if (a.dataIndex === 0) {
                str = `{color4|${a.name}}`;
              } else if (a.dataIndex === 1) {
                str = `{color4|${a.name}}`;
              } else {
                str = `{color4|${a.name}}`;
              }
              return str;
            },
            rich: {
              color1: {
                color: "#ff9500",
                fontWeight: 700
              },
              color2: {
                color: "#02d8f9",
                fontWeight: 700
              },
              color3: {
                color: "#027fff",
                fontWeight: 700
              },
              color4: {
                color: "#7d94cf"
              }
            }
          }
        }
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

function hengxiangbar2(echarts, idstring, cate, num) {
  var myChart = echarts.init(document.getElementById(idstring));

  var charts = {
    // 按顺序排列从大到小
    cityList: cate,
    cityData: num
  };
  var top10CityList = charts.cityList;
  var top10CityData = charts.cityData;
  var color = ["#ff9500", "#ff9500", "#ff9500"];
  var color1 = ["#ffb349", "#ffb349", "#ffb349"];

  let lineY = [];
  let lineT = [];
  for (var i = 0; i < charts.cityList.length; i++) {
    var x = i;
    if (x > 1) {
      x = 2;
    }
    var data = {
      name: charts.cityList[i],
      color: color[x],
      value: top10CityData[i],
      barGap: "0%",
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: color[x]
              },
              {
                offset: 1,
                color: color1[x]
              }
            ],
            false
          ),
          barBorderRadius: 2
        },
        emphasis: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.1)"
        }
      }
    };
    var data1 = {
      value: top10CityData[0],
      itemStyle: {
        color: "#7d94cf",
        barBorderRadius: 10
      }
    };
    lineY.push(data);
    lineT.push(data1);
  }

  var option = {
    // backgroundColor: '#244f97',
    title: {
      show: false
    },
    tooltip: {
      trigger: "item",
      formatter: p => {
        if (p.seriesName === "total") {
          return "";
        }
        return `${p.name}<br/>${p.value}`;
      }
    },
    grid: {
      borderWidth: 0,
      top: "5%",
      left: "1%",
      right: "20%",
      bottom: "5%"
    },
    color: color,
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        grid: {
            borderWidth: 0,
            top: '1%',
            left: '1%',
            right: '20%',
            bottom: '10%'
        },
        data: top10CityList
      },
      {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          inside: false,
          // verticalAlign: 'bottom',
          lineHeight: "30",
          textStyle: {
            color: "#fff",
            fontSize: fontSize(0.16),
            fontFamily: "PingFangSC-Regular"
          },
          formatter: function (val) {
            return `${val}`;
          }
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: top10CityData.reverse()
      }
    ],
    xAxis: {
      type: "value",
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        name: "total",
        type: "bar",
        zlevel: 1,
        barGap: "-100%",
        barWidth: "10px",
        data: lineT,
        legendHoverLink: false
      },
      {
        name: "bar",
        type: "bar",
        zlevel: 2,
        barWidth: "10px",
        data: lineY,
        label: {
          normal: {
            color: "#7d94cf",
            show: true,
            position: [0, "-15px"],
            textStyle: {
              fontSize: fontSize(0.16)
            },
            formatter: function (a) {
              let num = "";
              let str = "";
              if (a.dataIndex + 1 < 10) {
                num = a.dataIndex + 1;
              } else {
                num = a.dataIndex + 1;
              }
              if (a.dataIndex === 0) {
                str = `{color4|${a.name}}`;
              } else if (a.dataIndex === 1) {
                str = `{color4|${a.name}}`;
              } else {
                str = `{color4|${a.name}}`;
              }
              return str;
            },
            rich: {
              color1: {
                color: "#ff9500",
                fontWeight: 700
              },
              color2: {
                color: "#02d8f9",
                fontWeight: 700
              },
              color3: {
                color: "#027fff",
                fontWeight: 700
              },
              color4: {
                color: "#7d94cf"
              }
            }
          }
        }
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

// 人均废弃量
function feiqiliang(echarts, idstring) {
  var myChart = echarts.init(document.getElementById(idstring));

  var charts = {
    // 按顺序排列从大到小
    cityList: [
      "丽水市职业高级中学（斤）",
      "丽水市文元学校（斤）",
      "丽水市实验学校（斤）",
      "丽水市实验学校（斤）",
      "丽水市第二高级中学（斤）"
    ],
    cityData: [1000, 900, 800, 700, 600]
  };
  var top10CityList = charts.cityList;
  var top10CityData = charts.cityData;
  var color = ["#010ced", "#010ced", "#010ced"];
  var color1 = ["#7d94cf", "#7d94cf", "#7d94cf"];

  let lineY = [];
  let lineT = [];
  for (var i = 0; i < charts.cityList.length; i++) {
    var x = i;
    if (x > 1) {
      x = 2;
    }
    var data = {
      name: charts.cityList[i],
      color: color[x],
      value: top10CityData[i],
      barGap: "0%",
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: color[x]
              },
              {
                offset: 1,
                color: color1[x]
              }
            ],
            false
          ),
          barBorderRadius: 2
        },
        emphasis: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.1)"
        }
      }
    };
    var data1 = {
      value: top10CityData[0],
      itemStyle: {
        color: "#4a555f",
        barBorderRadius: 10
      }
    };
    lineY.push(data);
    lineT.push(data1);
  }

  var option = {
    // backgroundColor: '#244f97',
    title: {
      show: false
    },
    tooltip: {
      trigger: "item",
      formatter: p => {
        if (p.seriesName === "total") {
          return "";
        }
        return `${p.name}<br/>${p.value}`;
      }
    },
    grid: {
      borderWidth: 0,
      top: "1%",
      left: "1%",
      right: "20%",
      bottom: "20%"
    },
    color: color,
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        grid: {
            borderWidth: 0,
            top: '1%',
            left: '1%',
            right: '20%',
            bottom: '10%'
        },
        data: top10CityList
      },
      {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          inside: false,
          // verticalAlign: 'bottom',
          lineHeight: "15",
          textStyle: {
            color: "#fff",
            fontSize: fontSize(0.14),
            fontFamily: "PingFangSC-Regular"
          },
          formatter: function (val) {
            return `${val / 10}%`;
          }
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: top10CityData.reverse()
      }
    ],
    xAxis: {
      type: "value",
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        name: "total",
        type: "bar",
        zlevel: 1,
        barGap: "-100%",
        barWidth: "10px",
        data: lineT,
        legendHoverLink: false
      },
      {
        name: "bar",
        type: "bar",
        zlevel: 2,
        barWidth: "10px",
        data: lineY,
        label: {
          normal: {
            color: "#7d94cf",
            show: true,
            position: [0, "-15px"],
            textStyle: {
              fontSize: 16
            },
            formatter: function (a) {
              let num = "";
              let str = "";
              if (a.dataIndex + 1 < 10) {
                num = a.dataIndex + 1;
              } else {
                num = a.dataIndex + 1;
              }
              if (a.dataIndex === 0) {
                str = `{color4|${a.name}}`;
              } else if (a.dataIndex === 1) {
                str = `{color4|${a.name}}`;
              } else {
                str = `{color4|${a.name}}`;
              }
              return str;
            },
            rich: {
              color1: {
                color: "#ff9500",
                fontWeight: 700
              },
              color2: {
                color: "#02d8f9",
                fontWeight: 700
              },
              color3: {
                color: "#027fff",
                fontWeight: 700
              },
              color4: {
                color: "#7d94cf",
                fontWeight: 700
              }
            }
          }
        }
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

function map3d(echarts, idstring) {
  var myChart = echarts.init(document.getElementById(idstring));

  //引入市区json文件
  var uploadedDataURL = "/asset/get/s/data-1597452450339-dQm5JP9rx.json";

  myChart.showLoading();
  $.getJSON(uploadedDataURL, function (geoJson) {
    echarts.registerMap("china", geoJson);
    myChart.hideLoading();
    //地理位置信息
    var geoCoordMap = {
      遂平县: [114.015819, 33.150944],
      上蔡县: [114.276256, 33.267906],
      西平县: [114.022143, 33.394355],
      驿城区: [114.006045, 32.978599],
      确山县: [114.033641, 32.810768],
      泌阳县: [113.335694, 32.731107],
      汝南县: [114.375141, 33.016389],
      正阳县: [114.398138, 32.615372],
      平舆县: [114.629254, 32.969876],
      新蔡县: [114.979952, 32.752487]
    };
    //数据信息
    var data = [
      { name: "遂平县", value: 199 },
      { name: "上蔡县", value: 42 },
      { name: "西平县", value: 102 },
      { name: "驿城区", value: 81 },
      { name: "确山县", value: 47 },
      { name: "泌阳县", value: 67 },
      { name: "汝南县", value: 82 },
      { name: "正阳县", value: 123 },
      { name: "平舆县", value: 24 },
      { name: "新蔡县", value: 92 }
    ];
    var max = 480,
      min = 9; // todo
    var maxSize4Pin = 100,
      minSize4Pin = 20;

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    };

    option = {
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#0f378f" // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#00091a" // 100% 处的颜色
          }
        ],
        globalCoord: false
      },
      title: {
        top: 20,
        text: "“设备实行情况” - 驻马店市",
        subtext: "",
        x: "center",
        textStyle: {
          color: "#ccc"
        }
      },

      tooltip: {
        trigger: "item",
        formatter: function (params) {
          if (typeof params.value[2] == "undefined") {
            return params.name + " : " + params.value;
          } else {
            return params.name + " : " + params.value[2];
          }
        }
      },
      /*   legend: {
                   orient: 'vertical',
                   y: 'bottom',
                   x: 'right',
                    data:['pm2.5'],
                   textStyle: {
                       color: '#fff'
                   }
               },*/
      legend: {
        orient: "vertical",
        y: "bottom",
        x: "right",
        data: ["pm2.5"],
        textStyle: {
          color: "#fff"
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 500,
        left: "left",
        top: "bottom",
        text: ["高", "低"], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {}
      },
      geo: {
        map: "china",
        show: true,
        roam: true,
        center: [114.006045, 32.978599],
        zoom: 7, //当前视角缩放比例
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            areaColor: "#3a7fd5",
            borderColor: "#0a53e9", //线
            shadowColor: "#092f8f", //外发光
            shadowBlur: 20
          },
          emphasis: {
            areaColor: "#0a2dae" //悬浮区背景
          }
        }
      },
      series: [
        {
          symbolSize: 5,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: "#fff"
            }
          },
          name: "light",
          type: "scatter",
          coordinateSystem: "geo",
          data: convertData(data)
        },
        {
          type: "map",
          map: "china",
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#fff"
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#FFFFFF"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          },
          animation: false,
          data: data
        },
        {
          name: "Top 5",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "pin",
          symbolSize: [50, 50],
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: fontSize(0.09)
              },
              formatter(value) {
                return value.data.value[2];
              }
            }
          },
          itemStyle: {
            normal: {
              color: "#D8BC37" //标志颜色
            }
          },
          data: convertData(data),
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke"
          },
          hoverAnimation: true,
          zlevel: 1
        }
      ]
    };
    myChart.setOption(option);
    window.onresize = myChart.resize();
  });
}
